{% extends "base.html" %}

{% block title %}{{ article[1] }} - 个人博客{% endblock %}

{% block content %}
<article class="bg-white rounded-lg shadow-md p-8 mb-8">
    <h1 class="text-3xl font-bold text-gray-800 mb-4">{{ article[1] }}</h1>
    <div class="text-gray-500 text-sm mb-6">
        <i class="far fa-clock mr-1"></i>{{ article[3] }}
    </div>
    <div class="prose max-w-none">
        {{ article[2] | safe }}
    </div>
</article>

<div class="bg-white rounded-lg shadow-md p-8">
    <h3 class="text-xl font-bold text-gray-800 mb-6">
        <i class="fas fa-comments mr-2"></i>评论 ({{ comments|length }})
    </h3>

    {% if comments %}
        <div class="space-y-4 mb-6">
            {% for comment in comments %}
                <div class="border-l-4 border-blue-500 pl-4">
                    <div class="flex justify-between items-start mb-2">
                        <strong class="text-gray-800">{{ comment[0] }}</strong>
                        <span class="text-sm text-gray-500">{{ comment[2] }}</span>
                    </div>
                    <p class="text-gray-700">{{ comment[1] }}</p>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="text-gray-500 mb-6">暂无评论，成为第一个评论的人吧！</p>
    {% endif %}

    <form action="{{ url_for('add_comment', article_id=article[0]) }}" method="POST" class="space-y-4">
        <div>
            <label for="author" class="block text-sm font-medium text-gray-700 mb-1">昵称</label>
            <input type="text" id="author" name="author" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label for="content" class="block text-sm font-medium text-gray-700 mb-1">评论内容</label>
            <textarea id="content" name="content" rows="4" required
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
        </div>
        <button type="submit" 
                class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-300">
            <i class="fas fa-paper-plane mr-2"></i>发表评论
        </button>
    </form>
</div>

<div class="mt-8">
    <a href="{{ url_for('index') }}" 
       class="text-blue-600 hover:text-blue-800">
        <i class="fas fa-arrow-left mr-2"></i>返回首页
    </a>
</div>
{% endblock %}
